<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚筒调试工具 - 中通一分四分拣配置</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
        }

        h1 {
            font-size: 18px;
            margin-bottom: 5px;
        }

        .header {
            width: 100%;
            height: 40px;
            background-color: rgb(218, 209, 198);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .first {
            background-color: #fff;
            width: 50%;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            margin-left: 60px;
        }

        .first>* {
            flex: 0 0 calc(33.33% - 10px);
            margin-bottom: 10px;
        }

        .third {
            background-color: #fff;
            width: 85%;
            padding: 50px;
            margin-left: 60px;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .fourth {
            position: fixed;
            right: 0;
            top: 0;
            background-color: #fff;
            width: 50%;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .second div,
        .third div {
            display: inline-block;
            width: calc(20% - 10px);
            margin-right: 10px;
            vertical-align: top;
        }

        .second div:last-child,
        .third div:last-child {
            margin-right: 0;
        }

        input[type="text"],
        select {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        button {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            background-color: #007BFF;
            color: #fff;
            cursor: pointer;
            margin-right: 10px;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>
    <div class="header">
        <h1></h1>
    </div>
    <!-- 第一行 -->
    <div class="first">
        <div>
            <h1>串口号</h1>
            <input type="text" id="serialPort" value="COM2">
        </div>
        <div>
            <h1>波特率</h1>
            <input type="text" id="baudRate" value="38400">
        </div>
        <!-- <div>
            <h1>小车号</h1>
            <input type="text" id="carNumber" value="2">
        </div> -->
        <div>
            <h1>速度</h1>
            <input type="text" id="speed" value="22">
        </div>
        <div>
            <h1>时间</h1>
            <input type="text" id="time" value="22">
        </div>
        <div>
            <h1>加速度</h1>
            <input type="text" id="acceleration" value="22">
        </div>
        <div>
            <h1>延迟</h1>
            <input type="text" id="delay" value="22">
        </div>
    </div>

    <!-- 第三行 -->
    <div class="third">
        <div>
            <h1>一号格口</h1>
            <select id="debangCar1">
                <option value="2">2</option>
                <option value="1">1</option>
                <option value="3">3</option>
            </select>
            <select id="debangCar2">
                <option value="2">2</option>
                <option value="1">1</option>
                <option value="3">3</option>
            </select>
            <select id="debangDirection1">
                <option value="0">正</option>
                <option value="1">反</option>
            </select>
            <select id="debangDirection2">
                <option value="0">正</option>
                <option value="1">反</option>
            </select>
        </div>
        <div>
            <h1>二号格口</h1>
            <select id="jituCar1">
                <option value="2">2</option>
                <option value="1">1</option>
                <option value="3">3</option>
            </select>
            <select id="jituCar2">
                <option value="2">2</option>
                <option value="1">1</option>
                <option value="3">3</option>
            </select>
            <select id="jituDirection1">
                <option value="0">正</option>
                <option value="1">反</option>
            </select>
            <select id="jituDirection2">
                <option value="0">正</option>
                <option value="1">反</option>
            </select>
        </div>
        <div>
            <h1>三号格口</h1>
            <select id="shentongCar1">
                <option value="2">2</option>
                <option value="1">1</option>
                <option value="3">3</option>
            </select>
            <select id="shentongCar2">
                <option value="2">2</option>
                <option value="1">1</option>
                <option value="3">3</option>
            </select>
            <select id="shentongDirection1">
                <option value="0">正</option>
                <option value="1">反</option>
            </select>
            <select id="shentongDirection2">
                <option value="0">正</option>
                <option value="1">反</option>
            </select>
        </div>
        <div>
            <h1>异常格口</h1>
            <select id="yuantongCar1">
                <option value="2">2</option>
                <option value="1">1</option>
                <option value="3">3</option>
            </select>
            <select id="yuantongCar2">
                <option value="2">2</option>
                <option value="1">1</option>
                <option value="3">3</option>
            </select>
            <select id="yuantongDirection1">
                <option value="0">正</option>
                <option value="1">反</option>
            </select>
            <select id="yuantongDirection2">
                <option value="0">正</option>
                <option value="1">反</option>
            </select>
        </div>
        <!-- <div>
            <h1>中通</h1>
            <select id="zhongtongCar1">
                <option value="2">2</option>
                <option value="1">1</option>
                <option value="3">3</option>
            </select>
            <select id="zhongtongCar2">
                <option value="2">2</option>
                <option value="1">1</option>
                <option value="3">3</option>
            </select>
            <select id="zhongtongDirection1">
                <option value="0">正</option>
                <option value="1">反</option>
            </select>
            <select id="zhongtongDirection2">
                <option value="0">正</option>
                <option value="1">反</option>
            </select>
        </div>
        <div>
            <h1>韵达</h1>
            <select id="yundaCar1">
                <option value="2">2</option>
                <option value="1">1</option>
                <option value="3">3</option>
            </select>
            <select id="yundaCar2">
                <option value="2">2</option>
                <option value="1">1</option>
                <option value="3">3</option>
            </select>
            <select id="yundaDirection1">
                <option value="0">正</option>
                <option value="1">反</option>
            </select>
            <select id="yundaDirection2">
                <option value="0">正</option>
                <option value="1">反</option>
            </select>
        </div>
        <div>
            <h1>邮政</h1>
            <select id="youzhengCar1">
                <option value="2">2</option>
                <option value="1">1</option>
                <option value="3">3</option>
            </select>
            <select id="youzhengCar2">
                <option value="2">2</option>
                <option value="1">1</option>
                <option value="3">3</option>
            </select>
            <select id="youzhengDirection1">
                <option value="0">正</option>
                <option value="1">反</option>
            </select>
            <select id="youzhengDirection2">
                <option value="0">正</option>
                <option value="1">反</option>
            </select>
        </div>
        <div>
            <h1>京东</h1>
            <select id="jingdongCar1">
                <option value="2">2</option>
                <option value="1">1</option>
                <option value="3">3</option>
            </select>
            <select id="jingdongCar2">
                <option value="2">2</option>
                <option value="1">1</option>
                <option value="3">3</option>
            </select>
            <select id="jingdongDirection1">
                <option value="0">正</option>
                <option value="1">反</option>
            </select>
            <select id="jingdongDirection2">
                <option value="0">正</option>
                <option value="1">反</option>
            </select>
        </div>
        <div>
            <h1>顺丰</h1>
            <select id="shunfengCar1">
                <option value="2">2</option>
                <option value="1">1</option>
                <option value="3">3</option>
            </select>
            <select id="shunfengCar2">
                <option value="2">2</option>
                <option value="1">1</option>
                <option value="3">3</option>
            </select>
            <select id="shunfengDirection1">
                <option value="0">正</option>
                <option value="1">反</option>
            </select>
            <select id="shunfengDirection2">
                <option value="0">正</option>
                <option value="1">反</option>
            </select>
        </div>
        <div>
            <h1>异常</h1>
            <select id="yichangCar1">
                <option value="2">2</option>
                <option value="1">1</option>
                <option value="3">3</option>
            </select>
            <select id="yichangCar2">
                <option value="2">2</option>
                <option value="1">1</option>
                <option value="3">3</option>
            </select>
            <select id="yichangDirection1">
                <option value="0">正</option>
                <option value="1">反</option>
            </select>
            <select id="yichangDirection2">
                <option value="0">正</option>
                <option value="1">反</option>
            </select>
        </div> -->
        <div>
            <h1>延时小车延时</h1>
            <input type="text" id="delayTime" value="50">
        </div>
        <button type="button" id="saveButton" style="margin: 50px;">保存</button>
        <button type="button" id="displayButton" onclick="window.location.href='http://localhost:3001/test'">点击返回展示页面</button>
    </div>

    <!-- 第四行 -->
    <div class="fourth" style="position: fixed; right: 80px; top: 41px; width: 500px; padding: 20px; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);">
        <h1>一分四滚筒参数调试</h1>
        <div>现有的快递为9种，异常快递分拣选择异常方向即可</div>
    </div>

    <div class="five" style="position: fixed;background-color: #fff;padding-left: 40px; right: 80px; top: 158px; width: 500px; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);">
        <h1>如有疑问请联系IT人员</h1>
        <h1>联系方式 </h1>
        <div>邮箱：<div style="display: inline-block;">13333333333@qq.com</div></div>
        <div>手机号：<div style="display: inline-block;">15836555555</div></div>
    </div>

    <script>
        // 页面加载时请求配置数据
        fetch('http://localhost:3001/configs')
            .then(response => response.json())
            .then(data => {
                document.getElementById('serialPort').value = data.configs.serialPort;
                document.getElementById('baudRate').value = data.configs.baudRate;
                // document.getElementById('carNumber').value = data.onePointFour.car_id;
                document.getElementById('speed').value = data.ztOnePointFour.speed;
                document.getElementById('time').value = data.ztOnePointFour.time;
                document.getElementById('acceleration').value = data.ztOnePointFour.acceleration;
                document.getElementById('delay').value = data.ztOnePointFour.delay;
                // document.getElementById('direction').value = data.onePointFour.direction;

                document.getElementById('debangCar1').value = data.ztOnePointFour.gridConfig.one.car[0];
                document.getElementById('debangCar2').value = data.ztOnePointFour.gridConfig.one.car[1];
                document.getElementById('debangDirection1').value = data.ztOnePointFour.gridConfig.one.direction[0];
                document.getElementById('debangDirection2').value = data.ztOnePointFour.gridConfig.one.direction[1];
                document.getElementById('jituCar1').value = data.ztOnePointFour.gridConfig.two.car[0];
                document.getElementById('jituCar2').value = data.ztOnePointFour.gridConfig.two.car[1];
                document.getElementById('jituDirection1').value = data.ztOnePointFour.gridConfig.two.direction[0];
                document.getElementById('jituDirection2').value = data.ztOnePointFour.gridConfig.two.direction[1];
                document.getElementById('shentongCar1').value = data.ztOnePointFour.gridConfig.three.car[0];
                document.getElementById('shentongCar2').value = data.ztOnePointFour.gridConfig.three.car[1];
                document.getElementById('shentongDirection1').value = data.ztOnePointFour.gridConfig.three.direction[0];
                document.getElementById('shentongDirection2').value = data.ztOnePointFour.gridConfig.three.direction[1];
                document.getElementById('yuantongCar1').value = data.ztOnePointFour.gridConfig.yichang.car[0];
                document.getElementById('yuantongCar2').value = data.ztOnePointFour.gridConfig.yichang.car[1];
                document.getElementById('yuantongDirection1').value = data.ztOnePointFour.gridConfig.yichang.direction[0];
                document.getElementById('yuantongDirection2').value = data.ztOnePointFour.gridConfig.yichang.direction[1];
                // document.getElementById('zhongtongCar1').value = data.onePointFour.gridConfig.zhongtong.car[0];
                // document.getElementById('zhongtongCar2').value = data.onePointFour.gridConfig.zhongtong.car[1];
                // document.getElementById('zhongtongDirection1').value = data.onePointFour.gridConfig.zhongtong.direction[0];
                // document.getElementById('zhongtongDirection2').value = data.onePointFour.gridConfig.zhongtong.direction[1];
                // document.getElementById('yundaCar1').value = data.onePointFour.gridConfig.yunda.car[0];
                // document.getElementById('yundaCar2').value = data.onePointFour.gridConfig.yunda.car[1];
                // document.getElementById('yundaDirection1').value = data.onePointFour.gridConfig.yunda.direction[0];
                // document.getElementById('yundaDirection2').value = data.onePointFour.gridConfig.yunda.direction[1];
                // document.getElementById('youzhengCar1').value = data.onePointFour.gridConfig.youzheng.car[0];
                // document.getElementById('youzhengCar2').value = data.onePointFour.gridConfig.youzheng.car[1];
                // document.getElementById('youzhengDirection1').value = data.onePointFour.gridConfig.youzheng.direction[0];
                // document.getElementById('youzhengDirection2').value = data.onePointFour.gridConfig.youzheng.direction[1];
                // document.getElementById('jingdongCar1').value = data.onePointFour.gridConfig.jingdong.car[0];
                // document.getElementById('jingdongCar2').value = data.onePointFour.gridConfig.jingdong.car[1];
                // document.getElementById('jingdongDirection1').value = data.onePointFour.gridConfig.jingdong.direction[0];
                // document.getElementById('jingdongDirection2').value = data.onePointFour.gridConfig.jingdong.direction[1];
                // document.getElementById('shunfengCar1').value = data.onePointFour.gridConfig.shunfeng.car[0];
                // document.getElementById('shunfengCar2').value = data.onePointFour.gridConfig.shunfeng.car[1];
                // document.getElementById('shunfengDirection1').value = data.onePointFour.gridConfig.shunfeng.direction[0];
                // document.getElementById('shunfengDirection2').value = data.onePointFour.gridConfig.shunfeng.direction[1];
                // document.getElementById('yichangCar1').value = data.onePointFour.gridConfig.yichang.car[0];
                // document.getElementById('yichangCar2').value = data.onePointFour.gridConfig.yichang.car[1];
                // document.getElementById('yichangDirection1').value = data.onePointFour.gridConfig.yichang.direction[0];
                // document.getElementById('yichangDirection2').value = data.onePointFour.gridConfig.yichang.direction[1];

                document.getElementById('delayTime').value = data.ztOnePointFour.delayTime;
            })
            .catch(error => {
                console.error('Error:', error);
            });

        document.getElementById('saveButton').addEventListener('click', function () {
            const configs = {
                serialPort: document.getElementById('serialPort').value,
                baudRate: parseInt(document.getElementById('baudRate').value)
            };
            const ztOnePointFour = {
                portsub: "12345",
                serveraddress: "127.0.0.1",
                port: document.getElementById('serialPort').value,
                // car_id: parseInt(document.getElementById('carNumber').value),
                speed: parseInt(document.getElementById('speed').value),
                time: parseInt(document.getElementById('time').value),
                // direction: parseInt(document.getElementById('direction').value),
                acceleration: parseInt(document.getElementById('acceleration').value),
                delay: parseInt(document.getElementById('delay').value),
                gridConfig: {
                    debang: {
                        car: [parseInt(document.getElementById('debangCar1').value), parseInt(document.getElementById('debangCar2').value)],
                        direction: [parseInt(document.getElementById('debangDirection1').value), parseInt(document.getElementById('debangDirection2').value)]
                    },
                    jitu: {
                        car: [parseInt(document.getElementById('jituCar1').value), parseInt(document.getElementById('jituCar2').value)],
                        direction: [parseInt(document.getElementById('jituDirection1').value), parseInt(document.getElementById('jituDirection2').value)]
                    },
                    shentong: {
                        car: [parseInt(document.getElementById('shentongCar1').value), parseInt(document.getElementById('shentongCar2').value)],
                        direction: [parseInt(document.getElementById('shentongDirection1').value), parseInt(document.getElementById('shentongDirection2').value)]
                    },
                    yuantong: {
                        car: [parseInt(document.getElementById('yuantongCar1').value), parseInt(document.getElementById('yuantongCar2').value)],
                        direction: [parseInt(document.getElementById('yuantongDirection1').value), parseInt(document.getElementById('yuantongDirection2').value)]
                    },
                    // zhongtong: {
                    //     car: [parseInt(document.getElementById('zhongtongCar1').value), parseInt(document.getElementById('zhongtongCar2').value)],
                    //     direction: [parseInt(document.getElementById('zhongtongDirection1').value), parseInt(document.getElementById('zhongtongDirection2').value)]
                    // },
                    // yunda: {
                    //     car: [parseInt(document.getElementById('yundaCar1').value), parseInt(document.getElementById('yundaCar2').value)],
                    //     direction: [parseInt(document.getElementById('yundaDirection1').value), parseInt(document.getElementById('yundaDirection2').value)]
                    // },
                    // youzheng: {
                    //     car: [parseInt(document.getElementById('youzhengCar1').value), parseInt(document.getElementById('youzhengCar2').value)],
                    //     direction: [parseInt(document.getElementById('youzhengDirection1').value), parseInt(document.getElementById('youzhengDirection2').value)]
                    // },
                    // jingdong: {
                    //     car: [parseInt(document.getElementById('jingdongCar1').value), parseInt(document.getElementById('jingdongCar2').value)],
                    //     direction: [parseInt(document.getElementById('jingdongDirection1').value), parseInt(document.getElementById('jingdongDirection2').value)]
                    // },
                    // shunfeng: {
                    //     car: [parseInt(document.getElementById('shunfengCar1').value), parseInt(document.getElementById('shunfengCar2').value)],
                    //     direction: [parseInt(document.getElementById('shunfengDirection1').value), parseInt(document.getElementById('shunfengDirection2').value)]
                    // },
                    // yichang: {
                    //     car: [parseInt(document.getElementById('yichangCar1').value), parseInt(document.getElementById('yichangCar2').value)],
                    //     direction: [parseInt(document.getElementById('yichangDirection1').value), parseInt(document.getElementById('yichangDirection2').value)]
                    // }
                },
                delayTime: parseInt(document.getElementById('delayTime').value)
            };
            fetch('http://localhost:3001/configs/zhongtong', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({configs, ztOnePointFour })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('保存成功');
                    } else {
                        alert('保存失败');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('保存失败');
                });
        });
    </script>
</body>

</html>